<template>
	<div class="subpage homedetail">
		<div class="home-wrap">
			<div class="img-box">
				<img :src="itemData.largePic" alt="">
				<div class="flex-top">
					产业升级项目
				</div>
			</div>
			<div class="main-wrap">
				<div class="main">   
					<h3>{{itemData.productName}}({{itemData.farmName}}）</h3>
					<p class="price">{{itemData.totalPrice}}<i>{{itemData.productPriceUnit}}</i></p>
					<p class="count">存货数量：{{itemData.numSaves}}{{itemData.productUnit}}</p>
					<p class="mock"><span>重量：{{itemData.productWeight}}{{itemData.productWeightUnit}}</span><span class="right">单价：{{itemData.salesPrice}}{{itemData.salePriceUnit}}</span></p>
					<p class="mock"><span>养殖期：{{itemData.timeLimit}}个月</span><span class="right">剩余交货期：{{itemData.deliveryMonth}}{{itemData.timeType}}</span></p>
					<p class="mock"><span>养殖地：{{itemData.originProvince}}</span><span class="right">牧场：{{itemData.farmName}}</span></p>
					<p class="mock meat-info">
						<span>交货标准:{{itemData.productDescription}}<img src="@/assets/img/home_img12.png" alt="" class="meat-tips" @click="meatTips"></span>
						
					</p>
				</div>
			</div>
			<div class="erbiao">
				<span class="biaoId">耳标ID</span>
				<span class="detail-more" @click="toResaleEarId">详情
					<van-icon name="arrow" size="14px" color="#CDCDCD" style="vertical-align: middle;margin-left: 4px;" /></span>
			</div>
			<div class="bg"></div>
			<div class="type-wrap">
				<div class="radio-box">
					<div class="type">
						<div class="type-title">配送方式</div>
					</div>
					<div class="delivery-text">
						<div class="delivery-text-left">
							<van-icon name="checked" class="color-primary" />
							<span>{{itemData.shipmentCategory}}</span>
							<span>{{itemData.postage}}</span>
						</div>
						<div class="delivery-text-right">
							<span>{{itemData.shipmentDetail}}</span>
						</div>
					</div>
				</div>
				<div class="radio-box">
					<div class="type">
						<div class="type-title">交易方式</div>
					</div>
					<div class="delivery-text">
						<div class="delivery-text-left">
							<van-icon name="checked" class="color-primary" />
							<span>{{itemData.payCategory}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="tab">
				<van-tabs v-model="active" sticky line-width="16%" title-active-color="#31BC8D" color="#31BC8D"
				 title-inactive-color="#344047" @click="chooseTab">
					<van-tab title='牧场介绍'>
						<div class="ranch-intro">
							  <img :src="itemData.farmDetail" alt="">
						</div>
					</van-tab>
					<!-- <van-tab title='三方公证'>
					  2
				  </van-tab> -->
					<van-tab title='牧场直播'>
						<FarmLiveComponent></FarmLiveComponent>
					</van-tab>
					<!-- <van-tab title='牛只保险'>

					</van-tab> -->
				</van-tabs>
			</div>
		</div>

		<div class="footer">
			<!-- <div class="his">根据历史成交价格，预计在x年x月前成交。</div> -->
			<div class="btn-cancel" @click="cancelResale">取消</div>
			<van-button round class="u-btn-default bind-btn" @click="shelvesAction">下架</van-button>
		</div>


		<div class="meat-alert-container" v-if="meatTipsFlag">
			<div class="meat-alert-box">
				<div class="meat-alert-box-top">{{itemData.productDescriptionTitle}}</div>
				<div class="meat-alert-box-center">
					<p>{{itemData.productDescriptionIntro}}</p>
					<p>{{itemData.productDescriptionDetail}}</p>
				</div>
				<div class="color-primary meat-alert-box-bottom" @click="meatTipsFlag = false">知道啦</div>
			</div>
		</div>

		<div class="cancel-resale" v-show="resaleCancelOverlay">
			<div class="resale-head">温馨提示</div>
			<p>是否要{{isResaleText}}转售商品？</p>
			<div class="cancel-btm">
				<span @click="resaleConfim">确定</span>
				<span @click="resaleCancel">取消</span>
			</div>
		</div>

		<van-overlay :show="resaleCancelOverlay" />

	</div>
</template>
<script>
	import Vue from 'vue';
	import { RadioGroup, Radio, Tab, Tabs, overlay } from 'vant';
	Vue.use(RadioGroup).use(Radio).use(Tab).use(Tabs).use(overlay);
	import FarmLiveComponent from '@/components/homeCom/FarmLiveComponent'

	export default {
		components: {
			FarmLiveComponent
		},
		data() {
			return {
				productId: '', // 通过这个商品详情id，调 GET /api/product/detail/{product_id}
				isResaleType: 1,
				isResaleText: '',
				cusumerTel: '',
				btnTitle: '立即采购',
				active: 0,
				meatTipsFlag: false,
				resaleCancelOverlay: false,
				itemData: {},
				idData: {}
			}
		},
		created(){
			this.idData = JSON.parse(this.$route.query.item);
			console.log(this.idData)
			this.getProductDetail();
			
		},
		methods: {
			// 转售详情
			getProductDetail(){
				this.$api.get('/api/product/detail/' + this.idData.productId) // 从上个页面带过来的 转售id
				.then(({data})=>{
					console.log(data)
					if(data.timeType == '1'){
						data.timeType = '个月'
					} else if(data.timeType == '2'){
						data.timeType = '周'
					} else if(data.timeType == '3'){
						data.timeType = '天'
					}
					this.itemData = data;
				})
			},
			showToast() {
				this.$tool.toast('页面正在开发中，敬请期待！')
			},
			onClick(name, title) {
				console.log(name, title)
				if (title == '牧场直播') {
					this.showToast()
					this.active = 0;
				} else if (title == '牛只保险') {
					this.active = 0;
					this.showToast()
				}
			},
			// 显示遮罩层
			showOverlay() {
				this.isOverlay = true;
			},
			meatTips() { //出肉率提示
				this.meatTipsFlag = true;
			},
			chooseTab(name, title) {
				if (name == 2) {
					this.$tool.toast('正在开发中，敬请期待！')
				}
			},
			resaleCancel(){
				this.resaleCancelOverlay = false;
			},
			// 显示下架遮罩层
			cancelResale() {
				this.isResaleText = '取消'
				this.resaleCancelOverlay = true;
			},
			// 确定下架
			resaleConfim() {
				if(this.isResaleText == '取消'){
					// 调取消转售接口
					this.$api.post('/api/resale/cancel',{resaleId: this.idData.resaleId})
					.then((res)=>{
						console.log(res)
						this.resaleCancelOverlay = false;
						this.$router.push({
							path: '/my/resale'
						})
					})
					
				} else {
					// 调下架接口 
					let postData = {
						resaleId: this.idData.resaleId,
						releaseState: 99
					}
					this.$api.post('/api/resale/release', postData)
					.then((res)=>{
						console.log(res)
						this.resaleCancelOverlay = false;
						this.$router.push({
							path: '/my/resale'
						})
					})
					
				}
			},
			// 耳标id详情
			toResaleEarId() {
				this.$router.push({
					path: '/my/erbiao/' + this.itemData.id
				})
			},
			// 下架
			shelvesAction(){
				this.isResaleText = '下架'
				this.resaleCancelOverlay = true;
			}
		}
	}
</script>

<style lang="scss">

</style>

<style lang="scss" scoped>
	.home-wrap{
		width: 100%;
		height: calc(100% - 62px) !important;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.cancel-resale {
		width: 262px;
		background: rgba(255, 255, 255, 1);
		border-radius: 8px;
		position: fixed;
		left: 50%;
		top: 50%;
		margin-left: -131px;
		margin-top: -64px;
		z-index: 100;

		.resale-head {
			color: #344047;
			font-size: 16px;
			text-align: center;
			margin-top: 20px;
			font-weight: 500;
			margin-bottom: 14px;
		}

		p {
			text-align: center;
			color: #666;
			margin-bottom: 19px;
		}

		.cancel-btm {
			width: 100%;
			height: 42px;
			line-height: 42px;
			display: flex;
			border-top: 1px solid #e5e5e5;

			span {
				text-align: center;
				flex: 1;

				&:first-child {
					border-right: 1px solid #e5e5e5;
					color: #5D6164;
				}

				&:last-child {
					color: #31BC8D;
					font-size: 16px;
				}
			}
		}
	}

	.footer {
		width: 100%;
		height: 62px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #Fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 0 16px;
		box-shadow: 2px 2px 5px #c2c2c2;
		-webkit-box-shadow: 2px 2px 5px #c2c2c2;
		.his{
			width: 100%;
			height: 44px;
			line-height: 44px;
			background-color: #FFF1DA;
			color: #F58523;
			padding-left: 16px;
			position: absolute;
			left: 0;
			top: -44px;
		}
		.btn-cancel {
			width: 144px;
			height: 51px;
			border-radius: 26px;
			border: 1px solid #31BC8D;
			color: #31BC8D;
			font-size: 16px;
			text-align: center;
			line-height: 51px;
		}

		.bind-btn {
			width: 144px;
			background: linear-gradient(94deg, rgba(49, 188, 141, 1) 0%, rgba(166, 226, 155, 1) 100%);
			box-shadow: none;
			font-size: 16px;
		}

	}

	.erbiao {
		width: 100%;
		height: 48px;
		line-height: 48px;
		padding: 0 16px;
		border-top: 1px solid #F2F2F2;
		background-color: #fff;
		display: flex;
		justify-content: space-between;

		.biaoId {
			color: #344047;
			font-size: 16px;
		}

		.detail-more {
			color: #969C9E;
			font-size: 12px;
		}

	}

	.home-wrap {
		width: 100%;
		height: calc(100% - 63px);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}

	.bg {
		width: 100%;
		height: 10px;
		background-color: #f2f2f2;
	}

	.van-overlay {
		z-index: 99 !important;
	}

	.modal {
		width: 344px;
		height: 438px;
		background: rgba(255, 255, 255, 1);
		border-radius: 8px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -172px;
		margin-top: -219px;
		z-index: 9999;

		.modal-head {
			width: 100%;
			height: 62px;
			line-height: 62px;
			text-align: center;
			color: #5D6164;
			font-size: 16px;
			border-bottom: 1px solid #F2F2F2;
			position: relative;

			.closeOverlay {
				display: block;
				font-size: 20px;
				position: absolute;
				right: 23px;
				top: 20px;
				font-weight: 600;
			}
		}

		.modal-content {
			padding: 24px 16px 16px 16px;

			h3 {
				color: #5D6164;
				font-size: 16px;
				margin-bottom: 16px;
			}

			.modalId {
				width: 100%;
				margin-bottom: 16px;

				.modal-left {
					float: left;
				}

				.modal-right {
					margin-left: 85px;
				}

				span {
					color: #969C9E;
				}
			}
		}

		.zs {
			padding: 24px 16px 16px 16px;

			h3 {
				color: #5D6164;
				font-size: 16px;
				margin-bottom: 16px;
			}
		}

	}

	.active {
		background: #D0CFCF !important;
	}

	.img-icon img {
		width: 11px;
		margin-left: 32px;
		margin-right: 4px;
	}

	.img-icon .bz {
		color: #F58523;
	}

	.tab {
		width: 100%;
		height: 200px;
	}
	.img-box {
		width: 100%;
		height: 174px;
		position: relative;

		.flex-top {
			line-height: 34px;
			text-align: center;
			background-color: #31BC8D;
			color: #fff;
			width: 115px;
			height: 34px;
			border-radius: 0px 100px 100px 0px;
			position: absolute;
			bottom: 10px;
			left: 0;
		}

		img {
			width: 100%;
			height: 174px;
		}
	}

	.main-wrap {
		background-color: #fff;
		padding: 16px;

		.main {

			h3 {
				font-size: 16px;
				color: #344047;
				margin-bottom: 16px;
			}

			.price {
				font-size: 18px;
				color: #F58523;
				margin-bottom: 16px;
				font-weight: 500;

				i {
					color: #969C9E;
					font-size: 12px;
					margin-left: 6px;
					font-weight: 400;
				}
			}

			.count {
				color: #5D6164;
				margin-bottom: 16px;
			}

			.mock {
				color: #969C9E;
				margin-bottom: 12px;
				position: relative;

				.right {
					position: absolute;
					left: 180px;
					top: 0;
				}

				.meat-tips {
					width: 16px;
					height: 16px;
					margin-left: 2px;
					vertical-align: middle;
				}

				&.meat-info {
					display: flex;
					align-items: center;
				}
			}

			.mock:last-child {
				margin-bottom: 0;
			}


		}
	}

	.type-wrap {
		background-color: #fff;
		padding: 0 16px 16px 16px;

		.radio-box {

			.type {

				.type-title {
					width: 100%;
					height: 48px;
					line-height: 48px;
					color: #344047;
					font-size: 16px;
					font-weight: 500;
				}

			}
		}

		.radio-box:last-child {
			margin-bottom: 0;
		}
	}


	.meat-alert-container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, .4);

		.meat-alert-box {
			width: 310px;
			background-color: #fff;
			border-radius: 8px;
			overflow: hidden;

			.meat-alert-box-top {
				width: 100%;
				height: 52px;
				line-height: 52px;
				font-size: 16px;
				color: #5D6164;
				text-align: center;
				background-color: #F8F8F8;
			}

			.meat-alert-box-center {
				padding: 16px 22px;
				box-sizing: border-box;
				border-bottom: 1px solid #f2f2f2;
				p{
					&:first-child{
						color: #344047;
						font-size: 16px;
						margin-bottom: 10px;
						font-weight: 500;
					}
				}
			}

			.meat-alert-box-bottom {
				width: 100%;
				height: 48px;
				line-height: 48px;
				text-align: center;
				font-size: 16px;
			}
		}
	}

	.ranch-intro {
		width: 100%;
		padding-bottom: 10px;
		margin-top: 2px;

		img {
			width: 100%;
		}
	}

	.delivery-text {
		width: 100%;

		.delivery-text-left {
			display: flex;
			align-items: center;
			margin-right: 32px;

			.color-primary {
				font-size: 20px;
			}

			span {
				margin-left: 8px;
				color: #969C9E;
			}
		}

		.delivery-text-right {
			margin-left: 28px;
			margin-top: 4px;
			img {
				width: 11px;
				height: 11px;
				object-fit: cover;
				margin-right: 8px;
			}

			span {
				color: #969C9E;
			}
		}
	}
</style>
